<template>
	<view class="bg plr-30 gray-2">
		<!-- <view class="status_bar"></view>
		<view class="flex flex-between">
			<view class="white" @click="goStuff">
				我的材料
			</view>
		</view> -->
		<!-- 藏品列表 -->
		<empty v-if="list.length==0"></empty>
		
		
		<!-- <view class="" v-else v-for="(item,index) in list" :key="index" @click="goDetails(item.id)">
			<view class="collectItem bg-1 radius-40 mb-30 size-22">
				<image class="collectImg radius-40" :src="item.image"></image>
				<view class="plr-30 ptb-30 white">
					<view class="flex flex-start">
						<view class="size-34">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="" v-else>
			<view class="mb-20" v-for="(item,index) in list" :key="index" @click="goDetails(item.id)" style="position: relative">
				<image :src="item.image" mode="aspectFill" style="height: 400rpx;border-radius: 20rpx 20rpx 0 0;display: block;width: 100%;"></image>
        <view
            v-if="item.status == 1"
            class="itemTips plr-20 ptb-8"
            style="
              background: linear-gradient(
                to right,
                rgb(248, 144, 95),
                rgb(254, 182, 80)
              );
            "
        >
          {{ item.status_text }}
        </view>

        <view
            class="itemTips plr-20 ptb-8"
            v-if="item.status == 2"
            style="color: #e66633; background: #00000090"
        >
          {{ item.status_text }}
        </view>

        <view
            class="flex flex-start itemTips plr-20 ptb-8 bg-00"
            v-if="item.status == 3"
        >
          <image src="../../static/time.png" class="timeImg mr-8"></image>
          <view class="gold">
            {{ item.status_text }}
          </view>
        </view>

        <view
            class="itemTips plr-20 ptb-8 flex center"
            v-if="item.status == 4"
            style="background: linear-gradient(to right, #cf58e5, #fc76d5)"
        >
          <view class="">
            {{ item.status_text }}
          </view>
          <u-count-down
              :timestamp="item.diff_time"
              bg-color="background:transparent"
              color="#fff"
              font-size="24"
              separator-color="#fff"
              style="margin-left: 5rpx"
              @end="endTime"
          ></u-count-down>
        </view>

        <view class="pt-50 pb-50 pl-30 size-32 f-bold" style="background: #fff;border-radius: 0 0 20rpx 20rpx; color: #3c3c3c">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	import tab from "../../components/tab.vue"
	export default {
		components: {
			empty,tab
		},
		data() {
			return {
				flag: false, //上拉加载
				page: 1,
				pagesize: 10,
				status: 'more',
				list: []
			}
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.page = 1;
			this.list = [];
			this.init();
		},
		onHide() {
			this.list=[];
			this.page = 1;
			this.flag = false;
			this.status = 'more';
		},
		methods: {
			onNavigationBarButtonTap () {
				uni.navigateTo({
					url: "./stuff"
				})
			},
			goStuff() {
				
			},
			init() {
				this.$http('api/goods/forgeList', {
					page: this.page,
					pagesize: 10
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore'
					} else {
						this.list = this.list.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore'
						}
					}
				})
			},
			goDetails(id) {
				uni.navigateTo({
          // url: './chipDetails?id=' + id
          url: './chipDetailsNew?id=' + id
				})
			},
      endTime() {
        this.flag = false;
        this.page = 1;
        this.list = [];
        this.init();
      },
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
	.homeImg {
		width: 342rpx;
		height: 60rpx;
	}


	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

  .itemTips {
    position: absolute;
    right: 20rpx;
    top: 300rpx;
    background: #00000080;
    border-radius: 10rpx;
    color: #fff;
    font-size: 32rpx;
    z-index: 100;
    padding: 20rpx 20rpx;
    font-weight: 600;
    max-width: 500rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
